<template>
  <div class="component" @click="click">
    <el-image fit="cover" :src="coverUrl"></el-image>

    <div>
      <div class="title">
        <el-link :underline="false">
          {{ title }}
        </el-link>
      </div>

      <div class="text">
        授课教师：{{ teacherName }}
      </div>

      <div class="text">
        课程类型：{{ type }}
      </div>

      <div class="text">
        时长：{{ duration }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lessonId: {
      type: String,
      required: true,
    },
    teacherName: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    coverUrl: {
      type: String,
    },
    duration: {
      type: String,
    },
    type: {
      type: String,
    },
  },
  methods: {
    click() {
      this.loading.fullScreen = this.$loading(
        this.$store.state.fullScreeLoadingOption
      );

      this.$store
        .dispatch("lesson/getLessonInfo", this.lessonId)
        .then(() => {
          this.loading.fullScreen.close();
          this.$router.push("/lessonDetail");
        })
        .catch((error) => {
          console.log(error);
          this.loading.fullScreen.close();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.component {
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;

  .el-image {
    width: 70%;
    height: 100%;
    border-radius: 1rem;
  }

  .title {
    text-align: left;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;

    .el-link {
      font-size: 1.5rem;
      overflow-wrap: break-word;
      display: block;
    }
  }

  .text {
    text-align: left;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }
}
</style>